<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
		<title>大唐微科集团</title>
		<link rel="shortcut icon" href="assets/img/icon.png">
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
		<link rel="stylesheet" type="text/css" href="assets/css/green.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
		<link rel="stylesheet" href="assets/css/slicknav.css" />
		<link rel="stylesheet" href="assets/css/Element-ui.css" />
		<style type="text/css">
			#app{
				margin:auto;
				width:90%;
				margin-left:5%;
				float: left;
			}
			.el-carousel__container img{
				display: block;
				width:100%;
			}
			#carousel-area i{
				margin-right: 0;
			}
			.industr_center_img:hover{
				cursor: pointer;
			}
			.industr_right_img:hover{
				cursor: pointer;
			}
			@media only screen and (min-width: 320px) and (max-width: 480px) {
				.el-pagination.is-background .el-pager li {
				    margin: 0 2px;
				}
				.el-carousel__indicator {
				    padding: 4px 7px;
				}
				.el-carousel__button{
					width:7px;
					height:7px;
				}
			}
		</style>
	</head>

	<body>
		<header id="header-wrap"></header>
		<div id="app" v-cloak>
			<!--<div class="banner_img">
				<img src="assets/img/banner_bg.png"/>
			</div>-->
			<!--center-->
			<section id="about" class="section">
				<!--集团简介-->
				<div class="team-all about_team">
					<div class="about_border_bottom">
						<div class="about_left industr_centent_tit">
							<p class="index_tit_p">河南大唐微科电子商务集团有限公司</p>
							<ul class="index_ul">
								<li class="index_li" v-for="(item,index) in liIndustInfo" @click="rightBtn(item.id,index)" :class="{index_active_li:index == current}">{{item.classifiedsName}}</li>
							</ul>
						</div>
						<div class="left_height industr_left">
							<div class="left_bg">
								<p class="industr">{{leftInfo.classifiedsName}}</p>
								<p class="industr_eng">GROUP PROFILE</p>
								<p class="index_centent_p industr_centent" v-html="leftInfo.newsContent"></p>
							</div>
							<p class="btn_dele" @click="industInfoBtn(leftInfo.classifiedId,0)">阅读详情>></p>
							<div class="industr_left_img" v-if="leftInfoImg">
								<img :src="leftInfoImg"/>
							</div>
						</div>
						<div class="industr_center_img" v-if="centerInfoImg" @click="industInfoBtn(liIndustInfo[1].id,1)">
							<img :src="centerInfoImg"/>
							<p class="tianguan_tit china_tit">河南天灌</p>
							<p class="tianguan_tit eng_tit">HENAN   TIANGUAN</p>
						</div>
						<div class="industr_right">
							<div class="industr_right_img last_right_img" v-if="rightTwoImg" @click="industInfoBtn(liIndustInfo[3].id,2)">
								<img :src="rightTwoImg"/>
							</div>
							<div class="industr_right_img" v-if="rightOneImg" @click="industInfoBtn(liIndustInfo[3].id,3)">
								<img :src="rightOneImg"/>
								<!--<img src="assets/img/img2.png"/>-->
							</div>
							<div class="right_top_div">
								<div class="right_tit_div">
									<span class="left_span">{{rightInfo.classifiedsName}}</span>
									<span class="right_span" @click="industInfoBtn(rightInfo.classifiedId,4)">>>></span>
								</div>
								<p class="right_op" v-html="rightInfo.profile"></p>
							</div>
						</div>
					</div>
					<!--底部边框颜色-->
					<div class="bottom_color">
						<div class="left_color"></div>
						<div class="right_color"></div>
					</div>
				</div>
			</section>
		</div>
		<script type="text/javascript" src="assets/js/jquery-min.js"></script>
		<script type="text/javascript" src="assets/js/conent.js"></script>
		<script type="text/javascript" src="assets/js/vue.js" ></script>
		<script type="text/javascript" src="assets/js/vue-resource.js" ></script>
		<!--<script type="text/javascript" src="assets/js/Element-ui.js" ></script>-->
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data(){
					return{
						leftInfo : '',
						rightInfo : '',
						leftInfoImg : '',
						centerInfoImg : '',
						rightOneImg : '',
						rightTwoImg : '',
						//右侧
						liIndustInfo : '',
						current : 0
					}
				},
				created(){
					this.industInfo();
					this.rightInfoList();
				},
				methods:{
					industInfo(){
						var _this = this;
						this.$http.get(URL + 'showFistAbout').then(function(obj){
							console.log(obj)
							if(obj.body.code == 'success'){
								_this.leftInfo = obj.body.data.xiangcun;
								_this.rightInfo = obj.body.data.xianlianhui;
								_this.leftInfoImg = obj.body.data.firstMage;
								_this.centerInfoImg = obj.body.data.secondMage;
								_this.rightOneImg = obj.body.data.forthMage;
								_this.rightTwoImg = obj.body.data.thirdMage;
							}
						})
					},
					//详情的点击按钮
					industInfoBtn(id,index){
						console.log(id)
						var _this = this;
						this.$http.get(URL + 'queryClassifiedId/' + id).then(function(data){
							if(data.body.code == 'success'){
								window.location.href = 'Countychain.html?countyId=' + data.body.data[1].singObject.classifiedId + '&countyIndex=' + index
//								if(data.body.data[1].singObject.videoUrl == 'showFirst'){
//									window.location.href = 'Countychain.html?countyId=' + data.body.data[1].singObject.classifiedId + '&countyIndex=' + index
//								}else if(data.body.data[1].singObject.videoUrl == 'showForth'){
//									window.location.href = 'Countychain.html?countyId=' + data.body.data[1].singObject.classifiedId + '&countyIndex=' + index
//								}
							}
						})
					},
					//右侧列表
					rightInfoList(){
						var _this = this;
						this.$http.get(URL + 'externalclassifies').then(function(data){
							console.log(data)
							if(data.body.code == 'success'){
								if(data.body.data.length > 0){
									_this.liIndustInfo = data.body.data
								}
							}
						})
					},
					//右侧点击事件
					rightBtn(id,index){
						window.location.href = 'Countychain.html?countyId=' + id + '&countyIndex=' + index
					}
				}
			})
			
		</script>
		<!--底部-->
		<footer id="footer"></footer>
		<a href="#" class="back-to-top">
			<i class="fa fa-angle-up">
				<span class="i_span"></span>
			</i>
		</a>
		<script type="text/javascript" src="assets/js/Top.js"></script>
	</body>

</html>